r18gs

React18GlobalStore

🌐 Live Demo with Code: https://r18gs.vercel.app/

Motivation

While developing libraries utilizing React 18 features with Zustand, I encountered issues with tree-shaking when importing from specific folders. This caused the creation of multiple Zustand stores, resulting in bugs and unnecessary JavaScript code execution.

To address this, I created a lightweight, minimalistic store designed for shared states that optimizes tree-shaking and supports component imports from separate files.

Features

✅ Full TypeScript Support
✅ Unlock the Full Power of React18 Server Components
✅ Compatible with All React18 Build Systems and Frameworks
✅ Comprehensive Documentation with Typedoc
✅ Examples for Next.js, Vite, and Remix
✅ Seamlessly Works with Selectors

Simple Global State Across Components

Use the useRGS hook just like useState, but with a unique key to make the state accessible across components.

const [state, setState] = useRGS<number>("counter", 1);

Or initialize using a function:

const [state, setState] = useRGS<number>("counter", () => 1);

🔗 Getting Started: Guide

What's New?

🚀 Now Supports Selectors for Complex Stores
Explore more at https://r18gs.vercel.app/.

Using Plugins

Extend the store's functionality with the create function, withPlugins function, or the useRGSWithPlugins hook. Features like persistence to local storage can be easily integrated.

// store.ts
import { create } from "r18gs/dist/with-plugins";
import { persist } from "r18gs/dist/plugins"; // Use third-party or custom plugins

export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);

Use it just like useState without needing an initial value:

const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();

🔗 Learn More: Leveraging Plugins

Contributing

Contributions are welcome! See contributing.md.

🌟 Don't Forget to Star this repository!

Hands-On Learning Resources

• React and Next.js with TypeScript
• The Game of Chess with Next.js, React, and TypeScript

License

This library is licensed under the MPL-2.0 open-source license.

Support our work by sponsoring or enrolling in our courses.

---

Made with 💖 by Mayank Kumar Chaudhari